import { Fragment, PureComponent } from "react";
import './nav.scss'
import nav from './img/nav.png'
import spread from './img/spread.png'
import backtop from './img/backTop.png'
import service from './img/service.png'
import share from './img/share.png'
class NavBox extends PureComponent {
    changeType = () => {
        document.getElementById('btn').style.zIndex = 2;
        document.getElementById('btn1').style.zIndex = 1;
        document.getElementById('btn2').className = "ac btn2 return"
        document.getElementById('btn3').className = "ac btn3 return"
        document.getElementById('btn4').className = "ac btn4 return"
        document.getElementById('btn1').style.transform = 'rotate(90deg)';

    }
    changeType1 = () => {
        document.getElementById('btn').style.zIndex = 1;
        document.getElementById('btn1').style.zIndex = 2;
        document.getElementById('btn1').style.transform = 'rotate(-90deg)';
        document.getElementById('btn2').className = "ac btn2";
        document.getElementById('btn3').className = "ac btn3";
        document.getElementById('btn4').className = "ac btn4";
    }

    componentDidMount() {
        setTimeout(() => {
            this.changeType1()
        }, 500)
    }
    BackTop = () => {
        document.documentElement.scrollTop = 0
    }
    render() {
        return <Fragment>
            <div className='box' style={{ width: '0', height: '0' }}>
                <div className="btn" id="btn" onClick={this.changeType1}>
                    <img src={nav} alt={nav} />
                </div>
                <div className="btn1" id="btn1" onClick={this.changeType}>
                    <img src={spread} alt={spread} />
                </div>

                <div className="btn2" id="btn2" onClick={this.BackTop}>
                    <img src={backtop} alt={backtop} />
                </div>
                <div className="btn3" id="btn3">
                    <img src={service} alt={service} />
                </div>
                <div className="btn4" id="btn4">
                    <img src={share} alt={share} />
                </div>
            </div>
        </Fragment>
    }
}

export default NavBox